import {
    NGrid,
    NGridItem,
    NCard,
    NTree,
    TreeOption,
    NIcon,
    NLayout,
  } from "naive-ui";
  import { repeat } from "seemly";
  import { ChevronRight48Regular } from "@vicons/fluent";
  export default defineComponent({
    name: "Roles",
    setup() {
      function createData(level = 4, baseKey = ""): TreeOption[] | undefined {
        if (!level) return undefined;
        return repeat(6 - level, undefined).map((_, index) => {
          const key = "" + baseKey + level + index;
          return {
            label: createLabel(level),
            key,
            children: createData(level - 1, key),
          };
        });
      }
      function createLabel(level: number): string {
        if (level === 4) return "道生一";
        if (level === 3) return "一生二";
        if (level === 2) return "二生三";
        if (level === 1) return "三生万物";
        return "";
      }
      let treeData = createData();
      const renderSwitcherIcon = () => {
        return h(NIcon, null, { default: () => h(ChevronRight48Regular) });
      };
      return () => (
        <div class=" h-full flex flex-col margin-t-10 overflow-hidden">
          <NGrid xGap={10} yGap={10} cols={6} class="h-full">
            <NGridItem span={2}>
              <NCard
                bordered={false}
                title="角色"
                style="height:100%;"
                headerStyle={{
                  padding: "10px",
                  fontSize: "14px",
                }}
                contentStyle={{
                  padding: "10px",
                  position: "relative",
                }}
              >
                <NLayout
                  nativeScrollbar={false}
                  position="absolute"
                  style="background:none;"
                >
                  <NTree
                    blockLine
                    selectable
                    data={treeData}
                    renderSwitcherIcon={renderSwitcherIcon}
                  />
                </NLayout>
              </NCard>
            </NGridItem>
            <NGridItem span={4}>
              <NCard
                bordered={false}
                title="角色详情"
                style="height:100%;"
                headerStyle={{
                  padding: "10px",
                  fontSize: "14px",
                }}
                contentStyle={{
                  padding: "10px",
                  position: "relative",
                }}
              >
                <NLayout
                  nativeScrollbar={false}
                  position="absolute"
                  style="background:none;"
                  contentStyle={{
                      padding: "10px",
                    }}
                >
                  角色详情
                </NLayout>
              </NCard>
            </NGridItem>
          </NGrid>
        </div>
      );
    },
  });
  